Accept Both Functions and Components for DayPickerInput #862
Conversation
Codecov Report
@@ Coverage Diff @@
## master #862 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 15 15
Lines 645 645
Branches 141 141
=====================================
Hits 645 645
Continue to review full report at Codecov.
|
3 similar comments
Codecov Report
@@ Coverage Diff @@
## master #862 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 15 15
Lines 645 645
Branches 141 141
=====================================
Hits 645 645
Continue to review full report at Codecov.
|
Codecov Report
@@ Coverage Diff @@
## master #862 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 15 15
Lines 645 645
Branches 141 141
=====================================
Hits 645 645
Continue to review full report at Codecov.
|
Codecov Report
@@ Coverage Diff @@
## master #862 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 15 15
Lines 645 645
Branches 141 141
=====================================
Hits 645 645
Continue to review full report at Codecov.
|
| onKeyUp: this.handleInputKeyUp, | ||
| onClick: !inputProps.disabled ? this.handleInputClick : undefined, | ||
| }) | ||
| )} |
There was a problem hiding this comment.
I strongly recommend to extract common props to the const.
const props = {
placeholder: this.props.placeholder,
...inputProps,
value: this.state.typedValue || this.state.value,
onChange: this.handleInputChange,
onFocus: this.handleInputFocus,
onBlur: this.handleInputBlur,
onKeyDown: this.handleInputKeyDown,
onKeyUp: this.handleInputKeyUp,
onClick: !inputProps.disabled ? this.handleInputClick : undefined,
};
and then spread it to child.
| onClick={!inputProps.disabled ? this.handleInputClick : undefined} | ||
| /> | ||
| {this.props.component && | ||
| {}.toString.call(this.props.component) !== '[object Function]' ? ( |
There was a problem hiding this comment.
Why not just typeof this.props.component === 'function'?
There was a problem hiding this comment.
This way is more verbose. Not really relevant here but one good example is that it will return Array for Array instead of Object. A better way would be to actually have a function that would extract out Function.
Codecov Report
@@ Coverage Diff @@
## master #862 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 15 15
Lines 659 659
Branches 146 146
=====================================
Hits 659 659
Continue to review full report at Codecov.
|
|
Any progress on merging this? |
|
This will be solved in the upcoming v8: see #942 . Thanks! |
Problem:
React was throwing an error when a function was passed into the
componentproperty for theDayPickerInputThis address #748
Explanation:
The docs example for component shows the above code. However it is using it and expecting a React Component, thus resulting in React throwing the following error:
Resolution:
Add a check to determine if the component is a function or not and if it is a function render the function by passing all
inputProps. If the component is a react component render as a component.